<template>
  <div>
    <el-dialog
      :title="photoList.name+'景点图片'"
      :visible="dialogTableVisible"
      @close="$emit('closeDialog')"
      width="70%"
    >
      <el-button type="primary" @click="addPhoto">add</el-button>

      <el-table :data="photoList.list" height="350">
        <el-table-column property="id" label="图片id" width="70"></el-table-column>
        <el-table-column property="url" label="图片地址" width="200"></el-table-column>
        <el-table-column label="图片显示">
          <template slot-scope="scope">
            <el-image
              style="width: 160px; height: 90px"
              :src="scope.row.url"
              fit="contain"
              :preview-src-list="[scope.row.url]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="small" @click="toChange(scope.row);showPhotoUp=true">编辑</el-button>
            <el-button size="small" type="danger" @click="toDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <attrPhotoAdd
      :dialogFormVisible="showPhotoAdd"
      :attrId="photoList.id"
      @closeDialog="showPhotoAdd=false"
      @refresha="refresha"
    ></attrPhotoAdd>
    <attrPhotoUpdate
      :dialogFormVisible="showPhotoUp"
      :toChangeRow="toChangeRow"
      @closeDialog="showPhotoUp=false"
      @refresha="refresha"
    ></attrPhotoUpdate>
  </div>
</template>

<script>
// import imgUpload from "../imgUpload";
import attrPhotoAdd from "../../components/attraction/attrPhotoAdd";
import attrPhotoUpdate from "../../components/attraction/attrPhotoUpdate";

export default {
  name: "AttrPhotoList",
  props: ["dialogTableVisible", "photoList"],
  data() {
    return {
      showPhotoAdd: false,
      showPhotoUp: false,
      toChangeRow: null
    };
  },
  methods: {
    addPhoto() {
      this.showPhotoAdd = true;      
    },
    toChange(obj) {
      this.toChangeRow = {
        imgId: obj.id,
        path: obj.url
      };
    },
    toDel(obj) {
      let isDel = false;
      this.$confirm(`确认删除该图片吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            let data = await this._axios.post("/ycwAdmin/attraction/delPhoto", {
              imgId: obj.id
            });
            instance.confirmButtonLoading = false;
            if (data.data.code) {
              isDel = true;
              done();
            } else {
              done();
            }
          } else {
            done();
          }
        }
      })
        .then(() => {
          if (isDel) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.refresha();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
          // this.$emit("refresh");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    refresha() {
      this.showPhotoAdd = false;
      this.showPhotoUp = false;
      this.$emit("refreshaPhoto", {
        id: this.photoList.id,
        title: this.photoList.name
      });
    }
  },
  components: {
    attrPhotoAdd,
    attrPhotoUpdate
  }
};
</script>

<style lang="scss" scoped>
.list {
  height: 40vh;
  overflow-y: scroll;
}
</style>